<template>
  <div class="upload-test">
    <el-card>
      <template #header>
        <h3>上传功能测试</h3>
      </template>
      
      <el-row :gutter="24">
        <!-- OSS API 测试 -->
        <el-col :span="12">
          <h4>OSS API 上传测试</h4>
          <el-upload
            ref="ossUploadRef"
            :auto-upload="false"
            :show-file-list="false"
            accept="image/*"
            :on-change="handleOssFileSelect"
          >
            <el-button type="primary">选择图片</el-button>
          </el-upload>
          
          <div v-if="ossSelectedFile" style="margin-top: 16px;">
            <p><strong>选中文件：</strong>{{ ossSelectedFile.name }}</p>
            <p><strong>文件大小：</strong>{{ formatFileSize(ossSelectedFile.size) }}</p>
            <el-button 
              type="success" 
              @click="testOssUpload"
              :loading="ossUploading"
            >
              {{ ossUploading ? '上传中...' : '开始上传' }}
            </el-button>
          </div>
          
          <div v-if="ossResult" style="margin-top: 16px;">
            <h5>OSS API 响应结果：</h5>
            <pre>{{ JSON.stringify(ossResult, null, 2) }}</pre>
            <img v-if="ossResult.url" :src="ossResult.url" style="max-width: 200px; margin-top: 8px;" />
          </div>
        </el-col>
        
        <!-- FileUpload 组件测试 -->
        <el-col :span="12">
          <h4>FileUpload 组件测试</h4>
          <FileUpload
            v-model="fileUploadUrl"
            type="image"
            @success="handleFileUploadSuccess"
            @error="handleFileUploadError"
          />
          
          <div v-if="fileUploadUrl" style="margin-top: 16px;">
            <p><strong>上传结果URL：</strong>{{ fileUploadUrl }}</p>
            <img :src="fileUploadUrl" style="max-width: 200px;" />
          </div>
          
          <div v-if="fileUploadResponse" style="margin-top: 16px;">
            <h5>FileUpload 组件响应：</h5>
            <pre>{{ JSON.stringify(fileUploadResponse, null, 2) }}</pre>
          </div>
        </el-col>
      </el-row>
      
      <el-divider />
      
      <el-row :gutter="24">
        <!-- 直接 el-upload 测试 -->
        <el-col :span="12">
          <h4>直接 el-upload 测试</h4>
          <el-upload
            action="/admin/attachment/upload"
            :headers="uploadHeaders"
            :data="uploadData"
            :show-file-list="false"
            :on-success="handleDirectUploadSuccess"
            :on-error="handleDirectUploadError"
            accept="image/*"
          >
            <el-button type="primary">直接上传</el-button>
          </el-upload>
          
          <div v-if="directUploadResult" style="margin-top: 16px;">
            <h5>直接上传响应：</h5>
            <pre>{{ JSON.stringify(directUploadResult, null, 2) }}</pre>
            <img v-if="directUploadResult.data?.url" :src="directUploadResult.data.url" style="max-width: 200px; margin-top: 8px;" />
          </div>
        </el-col>
        
        <!-- 错误日志 -->
        <el-col :span="12">
          <h4>错误日志</h4>
          <div v-if="errorLogs.length > 0">
            <div v-for="(error, index) in errorLogs" :key="index" style="margin-bottom: 8px;">
              <el-alert :title="error.message" type="error" :closable="false" />
              <pre style="font-size: 12px; margin-top: 4px;">{{ error.details }}</pre>
            </div>
          </div>
          <p v-else style="color: #67c23a;">暂无错误</p>
          
          <el-button @click="clearLogs" size="small">清空日志</el-button>
        </el-col>
      </el-row>
      
      <el-divider />
      
      <!-- 操作按钮 -->
      <div style="text-align: center;">
        <el-button @click="clearAllResults">清空所有结果</el-button>
        <el-button type="primary" @click="runAllTests">运行所有测试</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import * as ossApi from '@/api/oss'
import FileUpload from '@/components/FileUpload.vue'
import { formatFileSize } from '@/config/upload'

// 响应式数据
const ossUploadRef = ref()
const ossSelectedFile = ref<File | null>(null)
const ossUploading = ref(false)
const ossResult = ref<any>(null)

const fileUploadUrl = ref('')
const fileUploadResponse = ref<any>(null)

const directUploadResult = ref<any>(null)

const errorLogs = ref<Array<{ message: string; details: string }>>([])

// 计算属性
const uploadHeaders = computed(() => {
  const token = localStorage.getItem('token')
  return {
    'Authorization': token ? `Bearer ${token}` : ''
  }
})

const uploadData = computed(() => ({
  siteId: '1'
}))

// OSS API 测试方法
const handleOssFileSelect = (file: any) => {
  ossSelectedFile.value = file.raw
  ossResult.value = null
}

const testOssUpload = async () => {
  if (!ossSelectedFile.value) return
  
  try {
    ossUploading.value = true
    const result = await ossApi.uploadFile(ossSelectedFile.value, 1)
    ossResult.value = result
    ElMessage.success('OSS API 上传成功')
  } catch (error: any) {
    console.error('OSS API 上传失败:', error)
    errorLogs.value.push({
      message: 'OSS API 上传失败',
      details: JSON.stringify(error, null, 2)
    })
    ElMessage.error('OSS API 上传失败')
  } finally {
    ossUploading.value = false
  }
}

// FileUpload 组件测试方法
const handleFileUploadSuccess = (response: any, file: File) => {
  fileUploadResponse.value = response
  ElMessage.success('FileUpload 组件上传成功')
}

const handleFileUploadError = (error: any, file: File) => {
  errorLogs.value.push({
    message: 'FileUpload 组件上传失败',
    details: JSON.stringify(error, null, 2)
  })
  ElMessage.error('FileUpload 组件上传失败')
}

// 直接上传测试方法
const handleDirectUploadSuccess = (response: any, file: any) => {
  directUploadResult.value = response
  ElMessage.success('直接上传成功')
}

const handleDirectUploadError = (error: any, file: any) => {
  errorLogs.value.push({
    message: '直接上传失败',
    details: JSON.stringify(error, null, 2)
  })
  ElMessage.error('直接上传失败')
}

// 工具方法
const clearLogs = () => {
  errorLogs.value = []
}

const clearAllResults = () => {
  ossSelectedFile.value = null
  ossResult.value = null
  fileUploadUrl.value = ''
  fileUploadResponse.value = null
  directUploadResult.value = null
  errorLogs.value = []
}

const runAllTests = () => {
  ElMessage.info('请手动选择文件进行测试')
}
</script>

<style scoped lang="scss">
.upload-test {
  padding: 20px;
  
  h4 {
    margin: 0 0 16px 0;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
  }
  
  h5 {
    margin: 8px 0 4px 0;
    color: #606266;
    font-size: 14px;
    font-weight: 600;
  }
  
  pre {
    background: #f5f5f5;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    max-height: 200px;
    overflow-y: auto;
    margin: 4px 0;
  }
  
  p {
    margin: 4px 0;
    color: #606266;
    font-size: 14px;
  }
  
  img {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }
}
</style>
